import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from "../views/Home"

import Login from "../views/Login"
import CheckIdentity from "../views/CheckIdentity"

import Teacher from "../views/Teacher"
import Student from "../views/Student"
import Admin from "../views/Admin"

import Members from "../views/admin/Members"
import Colleges from "../views/admin/Colleges"
import Majors from "../views/admin/Majors"
import UserCenter from "../views/UserCenter"
import ChangePassWord from "@/views/ChangePassWord"



//发起请求
import axios from "../axios"

import store from "../store"

Vue.use(VueRouter)


//路由/路径？
// 1、全部写死，提前写好所有的路由，不管用户有没有权限，后面在通过权限数据来判断用户是否有权限访问路由。
// 2、动态渲染，就是把加载到的导航菜单数据动态绑定路由
// 使用第二种，后续再开发页面的时候不需要改动路由，可以动态绑定。
// 综上，我们把加载菜单数据这个动作放在router.js中。
const routes = [
  {
    //登陆界面
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    //确认身份跳转
    path: '/loading',
    name: 'CheckIdentity',
    component: CheckIdentity
  },
  {
    //管理员界面
    path: '/admin',
    name: 'Admin',
    component: Admin,
    children: [
      {
        path: '/admin/Members',
        name: 'Members',
        component: Members
      },
      {
        path: '/admin/Colleges',
        name: 'Colleges',
        component: () => import('../views/admin/Colleges')
      },
      {
        path: '/admin/Majors',
        name: 'Majors',
        component: () => import('../views/admin/Majors')
      },
      {
        path: '/admin/Courses',
        name: 'Courses',
        component: () => import('../views/admin/Courses')
      },
      {
        path: '/admin/TeaCourseCheck',
        name: 'TeaCourseCheck',
        component: () => import('../views/admin/TeaCourseCheck')
      },
      {
        path: '/admin/StuCourseCheck',
        name: 'StuCourseCheck',
        component: () => import('../views/admin/StuCourseCheck')
      },
      {
        path: '/admin/ClassroomArrange',
        name: 'ClassroomArrange',
        component: () => import('../views/admin/ClassroomArrange')
      },
      {
        path: '/admin/TimeArrange',
        name: 'TimeArrange',
        component: () => import('../views/admin/TimeArrange')
      },
      {
        path: '/admin/CourseSwitch',
        name: 'CourseSwitch',
        component: () => import('../views/admin/CourseSwitch')
      },
      {
        path: '/admin/userCenter',
        name: 'adminUserCenter',
        component: UserCenter
      },
    ]
  },
  {
    // 教师界面
    path: '/teacher',
    name: 'Teacher',
    component: Teacher,
    children: [
      {
        path: '/teacher/userCenter',
        name: 'teacherUserCenter',
        component: UserCenter
      },
      {
        path: '/teacher/changePassword',
        name: 'teacherChangePassword',
        component: ChangePassWord
      },
      {
        path: '/teacher/teaCourse',
        name: 'TeaCourse',
        component: () => import('../views/teacher/TeaCourse')
      },
      {
        path: '/teacher/teaCourseInfo',
        name: 'TeaCourseInfo',
        component: () => import('../views/teacher/TeaCourseInfo')
      }
    ]
  },
  {
    // 学生界面
    path: '/student',
    name: 'Student',
    component: Student,
    children: [
      {
        path: '/student/userCenter',
        name: 'studentUserCenter',
        component: UserCenter
      },
      {
        path: '/student/changePassword',
        name: 'studentChangePassword',
        component: ChangePassWord
      },
      {
        path: '/student/course',
        name: 'StuCourse',
        component: () => import('../views/student/StuCourse')
      },
      {
        path: '/student/courseApply',
        name: 'StuCourseApply',
        component: () => import('../views/student/StuCourseApply')
      }
    ]
  },
  {
  path: '/',
      name: 'Home',
    component: Home,
    children: [
      {
        path: '/index',
        name: 'Index',
        meta: {
          title: "首页"
        },// route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is [lazy-loaded] when the route is visited.
        component: () => import('@/views/Index.vue')
      },
    ]
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// Router有个前缀拦截，就是在路由到页面之前我们可以做一些判断或者加载数据。
// router.beforeEach((to, from, next) => {
//   let hasRoute = store.state.menus.hasRoute
//   let menus = store.state.menus.menuList
//   let token = localStorage.getItem("token")
//   // 如果去登陆界面
//   if (to.path == '/login') {
//     console.log("去登陆!!")
//     next()
//   }
//   // 1、客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生
//   // 2、Token的定义：服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
//   // 3、Token的目的：为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
//   //如果没有token
//   else if (!token) {
//     console.log("还没有token！！")
//     next({path: "/login"})
//   }
//   //默认路径->首页
//   else if (to.path == '/' || to.path == '') {
//     next({path: "/index"})
//   }
//   // 没有路由
//   else if (!hasRoute) {
//     let newRoutes = router.options.routes;
//     axios.get("/sys/menu/nav", {headers:{
//         Authorization: localStorage.getItem("token")
//     }}).then(res => {
//       console.log(res.data.data)
//       //拿到menuList
//       store.commit("setMenuList", res.data.data.nav)
//       //拿到用户权限
//       store.commit("setPermList", res.data.data.authoritys)
//       res.data.data.nav.forEach(menu => {
//         if (menu.children) {
//           menu.children.forEach(e => {
//             let route = menuToRoute(e)
//             if(route) {
//               newRoutes[0].children.push(route)
//             }
//           })
//         }
//       })
//       console.log("oldRoutes---------------")
//       console.log(newRoutes)
//       router.addRoutes(newRoutes)
//       hasRoute = true//3.19 2:19
//       store.commit("changeRouteStatus", true)
//       next({path: to.path})
//     })
//   }
//   else {
//     console.log("已经有路由了------------")
//     next()
//   }
// })

// 把menu数据转换成路由对象，然后router.addRoutes(newRoutes)动态添加路由对象。
// const menuToRoute = (menu) => {
//   console.log("正在添加menu--》")
//   console.log(menu)
//   if (!menu.component) {
//     return null
//   }
//   // 复制属性
//   let route = {
//     name: menu.name,
//     path: menu.path,
//     meta: {
//       icon: menu.icon,
//       title: menu.title
//     }
//   }
//   // menu.component是连接对应的组件，需要添加，
//   // 比如说/sys/users链接对应到component(sys/User)
//   // 这样我们才能绑定添加到路由
//   route.component = () => import('@/views/' + menu.component +'.vue')
//   return route
// }


// router.beforeEach(  (to ,from ,next )=>{
//
//   let hasRoute = store.state.menus.hasRoute
//
//   if (!hasRoute){
//     axios.get( "/sys/menu/nav", {
//       headers:{
//         Authorization: localStorage.getItem( "token")
//       }
//     }).then(res=>{
//
//       console.log(res.data.data)
//
//       //拿到menuList
//       store.commit("setMenuList",res.data.data.nav)
//
//       //拿到用户权限
//       store.commit("setPermList",res.data.data.authoritys)
//
//       console.log(store.state.menus.menuList)
//
//       //动态绑定路由
//       let newRoutes = router.options.routes
//
//       res.data.data.nav.forEach(menu => {
//         if (menu.children){
//           menu.children.forEach(e => {
//
//             //转成路由
//             let route=menuToRoute(e)
//             //把路由添加到路由管理中
//             if (route){
//               newRoutes[0].children.push(route)
//             }
//           })
//         }
//       })
//
//       console.log("newRoutes")
//       console.log(newRoutes)
//       router.addRoutes(newRoutes)
//
//       hasRoute=true
//       store.commit("changeRouteStatus",hasRoute)
//
//     })
//   }
//
//   next()
// })

//导航转成路由
const menuToRoute = (menu) => {
  if (!menu.component){
    return null
  }
  let route = {
    name:menu.name,
    path:menu.path,
    meta:{
      icon:menu.icon,
      title:menu.title
    }
  }

  route.component = () =>import('@/views' + menu.component+'.vue')

  return route
}

export default router
